<template>
        <div class="page">
                <div class="head">
                        <div class="head_title"> 控制台 </div>
                        <div class="header_welcome"> WELCOME <span>{{shopname}}</span></div>
                </div>
                <el-divider ></el-divider>
                <div class="content el-row--flex">
                        <el-row type="flex" class="content_sales content_unit" justify="space-around">
                                <div>
                                        <div class="sales_price font_family">￥ {{countprice}}</div>
                                        <div class="sales_title">总销售额</div>
                                </div>
                                <div class="sales_image">
                                        <el-image class="img" :src="sales_img"></el-image>
                                </div>
                        </el-row >
                        <el-row type="flex" class="content_order content_unit" justify="space-around">
                                <div>
                                        <div class="order_count font_family">{{countorder}} 单</div>
                                        <div class="order_title">总订单量</div>
                                </div>
                                <div class="order_image">
                                        <el-image class="img" width="50%"  height="50%"  :src="order_img"></el-image>
                                </div>
                        </el-row >
                        <el-row type="flex" class="content_people content_unit" justify="space-around">
                                <div>
                                        <div class="people_count font_family">{{countpeople}} 人次</div>
                                        <div class="people_title">总人次</div>
                                </div>
                                <div class="people_image">
                                        <el-image class="img" width="50%"  height="50%"  :src="people_img"></el-image>
                                </div>
                        </el-row >
                        <el-row type="flex" class="content_star content_unit" justify="space-around">
                                <div>
                                        <div class="star_count font_family">{{countstar}} 分</div>
                                        <div class="star_title">服务质量</div>
                                </div>
                                <div class="star_image">
                                        <el-image class="img" width="50%"  height="50%"  :src="star_img"></el-image>
                                </div>
                        </el-row >
                </div>

                <el-row class="bottom"  type="flex" >
                        <div class="bottom_left">
                                <div class="bottom_left_title" >
                                        一周商户走势
                                        <span><el-image width="1vw" height="1vw" :src="bottom_left_img"></el-image></span>
                                </div>
                                <el-divider ></el-divider>
                                <div id="chartLineBox"></div>
                        </div>
                        <div class="bottom_right">
                                <el-row :gutter="1">
                                        <el-col :span="12">
                                                <div class="grid-content bg-purple" @click="toDishesManagement()">
                                                        <div class="grid-content bg-purple toOrder">
                                                                <el-image class="link_img" :src="toOrder"></el-image>
                                                        </div>
                                                        <div  class="link_title" @click="toOrder()">
                                                                订单管理
                                                        </div>
                                                </div>
                                        </el-col>
                                        <el-col :span="12">
                                                <div class="grid-content bg-purple" @click="toDishesManagement()">
                                                        <div class="grid-content bg-purple toMenu">
                                                                <el-image class="link_img" :src="toMenu"></el-image>
                                                        </div>
                                                        <div  class="link_title" >
                                                                商品管理
                                                        </div>
                                                </div>
                                        </el-col>
                                        <el-col :span="12">
                                                <div class="grid-content bg-purple" @click="toShop()">
                                                        <div class="grid-content bg-purple toxinxi">
                                                                <el-image class="link_img" :src="toxinxi"></el-image>
                                                        </div>
                                                        <div  class="link_title">
                                                                店铺管理
                                                        </div>
                                                </div>
                                        </el-col>
                                        <el-col :span="12">
                                                <div class="grid-content bg-purple" @click="toVip()">
                                                        <div class="grid-content bg-purple toBusiness">
                                                                <el-image class="link_img" :src="toBusiness"></el-image>
                                                        </div>
                                                        <div class="link_title">
                                                                会员管理
                                                        </div>
                                                </div>
                                        </el-col>
                                </el-row>
                        </div>
                </el-row>
                <el-divider ></el-divider>
                <div style="font-size: 13px;height: 20px;margin-bottom: 2px">
                       米豆智慧云餐厅v1.0.0.01
                </div>

        </div>
</template>

<script>

  export default {
    name: 'hello',
    data () {
      return {
              sales_img:require('../../../public/image/chart/钱(1).png'),
              order_img:require('../../../public/image/chart/统计(2).png'),
              people_img:require('../../../public/image/chart/统计(3).png'),
              star_img:require('../../../public/image/chart/星.png'),
              bottom_left_img:require('../../../public/image/chart/排行(1).png'),
              toOrder:require('../../../public/image/chart/菜单(2).png'),
              toMenu:require('../../../public/image/chart/刀叉.png'),
              toxinxi:require('../../../public/image/chart/商家申请列表.png'),
              toBusiness:require('../../../public/image/chart/我.png'),
              //接收后台总销售额
              countprice:'',
              //接收后台总单量
              countorder:'',
              //接受后台总人次
              countpeople:'',
              //接受后台服务质量
              countstar:'',
              //获取token中的商户id
              token:JSON.parse(sessionStorage.getItem("bid")),
              //最近7天的收入
              sevendayprice:[
              ],
              //最近7天每天的订单量
              sevendayordernum:[],
              //最近7天每天的平均分
              sevendaycomstar:[],
              //店铺名称，
              shopname:'',
              //echarts数据
              dataset: {
                      // 提供一份数据。
                      source: [
                              ['product', '2015', '2016', '2017'],
                              ['Matcha Latte', 43.3, 85.8, 93.7],
                              ['Milk Tea', 83.1, 73.4, 55.1],
                              ['Cheese Cocoa', 86.4, 65.2, 82.5],
                              ['Walnut Brownie', 72.4, 53.9, 39.1]
                      ]
              },
              option:{
                      tooltip: {              //设置tip提示
                              trigger: 'axis'
                      },
                      legend: {               //设置区分（哪条线属于什么）
                              data:['总销售额','总订单','人流量','服务质量']
                      },
                      color: ['red','#8AE09F', '#FA6F53',"#DDA74E"],       //设置区分（每条线是什么颜色，和 legend 一一对应）
                      xAxis: {                //设置x轴
                              type: 'category',
                              boundaryGap: false,     //坐标轴两边不留白
                              data: [this.getDay(-7, 7200000),this.getDay(-6, 7200000),this.getDay(-5, 7200000),this.getDay(-4, 7200000),
                                      this.getDay(-3, 7200000),this.getDay(-2, 7200000),this.getDay(-1, 7200000)],

                              nameTextStyle: {        //坐标轴名称的文字样式
                                      color: '#FA6F53',
                                      fontSize: 16,
                                      padding: [0, 0, 0, 20]
                              },
                              axisLine: {             //坐标轴轴线相关设置。
                                      lineStyle: {
                                              color: '#FA6F53',
                                      }
                              }
                      },
                      yAxis: {
                              nameTextStyle: {
                                      color: '#FA6F53',
                                      fontSize: 16,
                                      padding: [0, 0, 10, 0]
                              },
                              axisLine: {
                                      lineStyle: {
                                              color: '#FA6F53',
                                      }
                              },
                              type: 'value'
                      },
                      // this.sevendayordernum[0].count,this.sevendayordernum[1].count,this.sevendayordernum[2].count,this.sevendayordernum[3].count,
                      // this.sevendayordernum[4].count,this.sevendayordernum[5].count,this.sevendayordernum[6].count,
                      series: [{
                              name: '总销售额',
                              data:  [],
                              type: 'line',               // 类型为折线图
                              lineStyle: {                // 线条样式 => 必须使用normal属性
                                      normal: {
                                              color: '#C0392B',
                                      }
                              },
                      },
                              {
                                      // this.sevendayprice[0].count,this.sevendayprice[1].count,this.sevendayprice[2].count,this.sevendayprice[3].count,
                                      // this.sevendayprice[4].count,this.sevendayprice[5].count,this.sevendayprice[6].count,
                                      name: '总订单',
                                      data: [],
                                      type: 'line',
                                      lineStyle: {
                                              normal: {
                                                      color: '#FA6F53',
                                              }
                                      },
                              },
                              {
                                      name: '人流量',
                                      data:  [],
                                      type: 'line',               // 类型为折线图
                                      lineStyle: {                // 线条样式 => 必须使用normal属性
                                              normal: {
                                                      color: '#8AE09F',
                                              }
                                      },
                              },
                              {
                                      name: '服务质量',
                                      data:  [],
                                      type: 'line',               // 类型为折线图
                                      lineStyle: {                // 线条样式 => 必须使用normal属性
                                              normal: {
                                                      color: '#DDA74E',
                                              }
                                      },
                              }
                      ]
              }
      }

    },
    methods: {

            //跳转订单页面
            // eslint-disable-next-line vue/no-dupe-keys
            toOrder(){
                    this.$router.push('/index/order');
            },
            toDishesManagement(){
                    this.$router.push('/index/dishesManagement');
            },
            toShop(){
                    this.$router.push('/index/shop');
            },
            toVip(){
                    this.$router.push('/index/vip');
            },
            //获取一周前的日期
            getDay (day, hours) {
                    var today = new Date()
                    var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day + hours
                    today.setTime(targetday)
                    var tYear = today.getFullYear()
                    var tMonth = today.getMonth()
                    var tDate = today.getDate()
                    tMonth = this.doHandleMonth(tMonth + 1)
                    tDate = this.doHandleMonth(tDate)
                    return tYear + '-' + tMonth + '-' + tDate
            },
            doHandleMonth (month) {
                    var m = month
                    if (month.toString().length === 1) {
                            m = '0' + month
                    }
                    return m
            },
 /*           getdoDayFindAllPrice(num , this.t){

            }*/
            load(){
                    //接收后台总销售额
                    this.$axios.post("/administration/order/doUserIdFindAllPrice",this.token).then(result => {
                            this.countprice = result.data;
                    })
                    //接收后台总单量
               this.$axios.post("/administration/order/doUserIdFindAllOrder",this.token).then(result => {
                            this.countorder = result.data;
                    })
                    //接受后台总人次
                   this.$axios.post("/administration/desk/doBuidFindSumPeople",this.token).then(result => {
                            this.countpeople = result.data;
                    })
                    //接受后台服务质量
                   this.$axios.post("/administration/comment/doBuidFindAVGStar",this.token).then(result => {
                            this.countstar = result.data;
                    })
                    //接受最近7天每天的收入
                    this.$axios.post("/administration/order/doDayFindAllPrice",this.token).then(result => {
                            for (let i = 0; i < result.data.length; i++) {
                                    this.option.series[0].data[i] = result.data[i].count;
                            }
                            this.updatedata()
                    })
                    //接受最近7每天的订单
                    this.$axios.post("/administration/order/doDayFindAllOrder",this.token).then(result => {
                            for (let i = 0; i < result.data.length; i++) {
                                    this.option.series[1].data[i] = result.data[i].count;
                            }
                            this.updatedata()
                    })
                    //接受最近7天每天的平均分
                   this.$axios.post("/administration/comment/doDayFindAvgStar",this.token).then(result => {
                           for (let i = 0; i < result.data.length; i++) {
                                   this.option.series[3].data[i] = result.data[i].count;
                           }
                           this.updatedata()
                    })
                    //接受最近7天每天的平均分
                    this.$axios.post("/administration/comment/doDayFindAvgStar",this.token).then(result => {
                            for (let i = 0; i < result.data.length; i++) {
                                    this.option.series[3].data[i] = result.data[i].count;
                            }
                            this.updatedata()
                    })
            },
            updatedata(){
                    this.chartLine.setOption(this.option);
            },
            doTokenFindShopName(){
                    this.$axios.post("/administration/business/doTokenFindShopName" , this.token).then(result=>{
                            this.shopname = result.data;
            })
            }
        },
        mounted(){
            this.doTokenFindShopName();
            this.load();
              // 以下为图表
              this.chartLine = this.$echarts.init(document.getElementById('chartLineBox'));
            // 使用刚指定的配置项和数据显示图表。
            this.chartLine.setOption(this.option);
            },

  }
</script>

<style scoped>
        .font_family{
        : 微软雅黑;
        }
        .page{
                width: 80vw;
                height: 100%;
                background-color: #F8F9FA;
        }
        #chartLineBox{
                width: 48vw;
                height: 15vw;
        }
        .head{
                background-color: #F5F6F8;
                height: 4vw;
        }
        .head_title{
                font-size: 15px;
                padding:1vw 0 0 1vw;
        }
        .header_welcome{
                font-size: 20px;
                padding:0 0 0 1vw;
                color: #EF763A;
        }
        .content{
                margin: 1vw 0 1vw 0;
        }
        .content_unit{
                width: 18.5vw;
                height: 5vw;
                background-color: #FFFFFF;
                margin:1vw 0  0 1vw;
                border-radius: 0.5vw ;
        }
        .sales_price{
                margin: 1.5vw 0 0 2vw;
                font-size: 20px;
                font-weight: bold;
                color: #C0392B;
        }
        .sales_title{
                margin-left: 2vw;
                font-size: 13px;
                font-weight: bold;
                color: #565686;
        }
        .order_count{
                margin: 1.5vw 0 0 2vw;
                font-size: 20px;
                font-weight: bold;
                color: #E56534;
        }
        .order_title{
                margin-left: 2vw;
                font-size: 13px;
                font-weight: bolder;
                color: #565686;
        }
        .people_count{
                margin: 1.5vw 0 0 2vw;
                font-size: 20px;
                font-weight: bold;
                color: #54A898;
        }
        .people_title{
                margin-left: 2vw;
                font-size: 13px;
                font-weight: bold;
                color: #565686;
        }
        .star_count{
                margin: 1.5vw 0 0 2vw;
                font-size: 20px;
                font-weight: bold;
                color: #E56534;
        }
        .star_title{
                margin-left: 2vw;
                font-size: 13px;
                font-weight: bold;
                color: #565686;
        }
        .people_image{
                margin: 1.5vw 0 0 5vw;
                width: 2.5vw;
                height: 2.5vw;
                border-radius: 50%;
                background-color: #54A898 ;
        }
        .sales_image{
                margin: 1.5vw 0 0 5vw;
                width: 2.5vw;
                height: 2.5vw;
                border-radius: 50%;
                background-color: #C0392B ;

        }
        .sales_image el-image{
                width: 50%;
                height: 50%;
        }
        .order_image{
                margin: 1.5vw 0 0 5vw;
                width: 2.5vw;
                height: 2.5vw;
                border-radius: 50%;
                background-color: #E56534 ;
        }
        .star_image{
                margin: 1.5vw 0 0 5vw;
                width: 2.5vw;
                height: 2.5vw;
                border-radius: 50%;
                background-color: #DDA74E;
        }
        .img{
                margin: 5px 0 5px 7px ;
                width:50%;
        }
        .bottom_left_title{
                color: #707070;
                font-size: 12px;
                margin-left: 1vw;

        }
        .bottom_left_title span{
                margin: 5px 0 0 0;
        }
        .bottom_left{
                background-color: #ffffff;
                margin-left: 1vw;
                width: 48vw;
                height: 20vw;
        }

        .bg-purple{
                background-color: #ffffff;
                margin: 0 3px 0 1px;
                width: 13vw;
                height: 9.5vw;

        }

        .bottom_right{
                margin-left: 10px;
                height: 30vw;
                width: 30vw;
        }

        .toOrder{
                width: 11.5vw;
                height: 7vw;
                background-color: #6193E5;
        }
        .toMenu{
                width: 11.5vw;
                height: 7vw;
                background-color: #79CEF7;
        }
        .toxinxi{
                width: 11.5vw;
                height: 7vw;
                background-color: #a0b9e5;
                margin-top: 1vw ;
        }
        .toBusiness{
                width: 11.5vw;
                height: 7vw;
                background-color: #2db5d7;
                margin-top: 1vw ;
        }
        .link_img{
                margin: 2vw;
        }
        .link_title{
                margin: 8px 0 0 5px;

        }



</style>